<html>
  <head>
    <title>Orbit Test Page</title>
    <meta property="orbit:color" content="violet" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="module" src="./orbit-web-component.js"></script>
    <style>
      body {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <h1>Test 1</h1>
    <orbit-reviewarea>
      <orbit-prompt question="Test question 1 $x^2 \neq 3$ with some more text after the math and then $\sqrt{z}$ some more math and then $\int_3^\infty z$ some more math after that." answer="Test answer $f(y)=\frac{z}{x}$"></orbit-prompt>
      <orbit-prompt cloze="Test {cloze} type question {with another deletion}."></orbit-prompt>
      <orbit-prompt question="Test question 2" answer="Test answer"></orbit-prompt>
      <orbit-prompt question="Test question 3" answer="Test answer"></orbit-prompt>
    </orbit-reviewarea>
    <h1>Test 2</h1>
    <orbit-reviewarea>
      <orbit-prompt question="Test question 1 (with image)" question-attachments="https://dummyimage.com/640x360/ccc/aaa" answer="Test answer"></orbit-prompt>
      <orbit-prompt question="Test question 4" answer="Test answer" answer-attachments="https://dummyimage.com/640x360/ccc/aaa"></orbit-prompt>
      <orbit-prompt question="Test question 5" answer="Test answer"></orbit-prompt>
    </orbit-reviewarea>
    <h1>Test 3</h1>
    <orbit-reviewarea>
      <orbit-prompt question="Test question 6" answer="Test answer"></orbit-prompt>
      <orbit-prompt question="Test question 7" answer="Test answer"></orbit-prompt>
      <orbit-prompt question="Test question 8" answer="Test answer"></orbit-prompt>
    </orbit-reviewarea>
  </body>
</html>
